<template>
	<view class="page">
		<scroll-view scroll-y="true" >
			<view class="article">
				<artile :title="article.title" :data="article.data"></artile>
			</view>
			<view class="discuss">
				<view class="discuss-control">
					<text class="discuss-control-title">评论</text>
					<tab v-model="discuss.query.sort"/>
				</view>
				<discuss
					v-for="(item,index) in discuss.data"
					:key="index"
					:name="item.name"
					:avatar="item.avatar"
					:content="item.content"
					:time="item.time"
					:imgs="item.imgs"
					:zan="item.zan"
					:isZan="item.isZan"
					@zan="handleZan(item)"
				/>
			</view>
		</scroll-view>
		<view class="reply">
			<reply :show.sync="reply.show" :avatar="reply.avatar" @open="handleOpen" @submit="handleReply"/>
		</view>
	</view>
</template>

<script>
	import artile from './componentArticle.vue'
	import tab from './componentTab.vue'
	import discuss from './componentDiscuss.vue'
	import reply from './componentReply.vue'
	export default {
		components: { artile, tab, discuss, reply },
		data(){
			return {
				isLogin:true,
				reply:{
					show:false,
					avatar: require('@/static/img/avatar.png'),
					name: "",
				},
				article:{
					title:"嵊州：关于落实Ⅰ级响应加强疫情防控工作的通告（第17号）",
					time: "2021-12-10 11:40",
					author: "张三",
					avatar: require('@/static/img/avatar-man.png'),
					data: [
						{
							type:'p',
							content:'根据国家、省、市疫情防控有关规定，我市从2021年12月9日16时起启动突发公共卫生事件Ⅰ级应急响应。为坚决阻断新冠肺炎疫情传播途径，有效遏制疫情扩散和蔓延，现就做好当前疫情防控工作通告如下：'
						},
						{
							type:'b',
							content:'一、主动配合防疫工作。'
						},
						{
							type:'p',
							content:'请广大市民群众密切关注阳性感染者相关信息，如与阳性感染者活动轨迹有交集的，应当主动向所在村（社区）、工作单位报备（或通过“浙里办”APP-“嵊里办”进行个人自主申报，也可通过扫二维码申报）。若接到疫情核查电话，请积极配合，如实反映个人出行情况，并配合落实防控措施。全市党员领导干部要带头做到不外出聚餐、非必要不进入室内娱乐休闲场所、非必要不出嵊。'
						},
						{
							type:'b',
							content:'二、落实健康管控措施。'
						},
						{
							type:'p',
							content:'对国内中高风险地区来嵊返嵊人员分类实施健康管理措施，其中对12月1日起来自上虞区百官街道阳光假日小区、华维北区、西横河小区以及与阳性感染者有轨迹交集的人员，采取“14+7”集中隔离管控措施；对12月1日以来有上虞区百官街道（除上述小区）、曹娥街道和上浦镇旅居史的人员，采取“3+11”管理措施。对12月1日以来有上虞区其他区域旅居史的人员，采取“14天日常健康监测”管理措施，第1、3、14天前往愿检尽检服务点进行核酸检测，期间出现发热、咳嗽、咽痛、腹泻、味觉嗅觉减退等症状的转为“14+7”集中隔离管控措施。'
						},
						{
							type:'b',
							content:'三、加强公共场所防控'
						},
						{
							type:'p',
							content:'持续落实重点场所防控要求,加强发热门诊、零售药店等哨点监管，加强对高铁站、汽车客运站、酒店、商场超市等人员密集场所管理，严格落实“测温+戴口罩+健康码+行程码+疫苗查验+引导登记”准入制度。景区景点要进一步强化预约、限流、错峰等措施，旅游景区接待游客量不超过最大承载量的 50%。各行政村(社区)在属地乡镇(街道)指导下，严格落实防疫要求，严格执行防控六查验制度，全面加强公共卫生管理和消杀工作。各级各类企业要严格落实企业主体责任，严守企业小门，原则上不接受非本单位职工入内；要加强企业职工宿舍管理，引导不串门、少聚集。'
						},
						{
							type:'img',
							content:'https://img.tmuyun.com/assets/20211210/1639108387195_61b2cf23b40eef5ff04de572.jpeg',
							
						}
					]
				},
				discuss:{
					query:{
						page: 1,
						limit: 5,
						sort:'new'//hot
					},
					total:0,
					loading:false,
					data:[
						{
							avatar: require('@/static/img/avatar-man.png'),
							name: '用户一',
							content: '今天天气真好',
							zan: 32,
							izZan: true
						},
						{
							avatar: require('@/static/img/avatar-woman.png'),
							name: '用户二',
							content: '今天天气真好',
							zan: 31,
							izZan: false,
							imgs:[
								require('@/static/mock/p1.jpg'),
								require('@/static/mock/p2.jpg')
							]
						}
					]
				}
			}
		},
		methods:{
			handleOpen(){
				if(this.isLogin){
					this.reply.show = true
				}
				else{
					//未登录处理，一般跳转登录页 或 弹出登录弹框
				}
			},
			handleReply(e){
				this.discuss.data.push({
					avatar: require('@/static/img/avatar-woman.png'),
					name: '用户二',
					content: e.content,
					zan: 31,
					izZan: false,
					imgs:e.imgs
				})
				console.log(e)
			}
		}
	}
</script>

<style lang='scss' scoped>
	.page{
		height: 100%;
		background-color: #F4F6F5;
		display: flex;
		flex-direction: column;
		scroll-view{
			flex: 1;
			overflow: auto;
			.article{
				background-color: #fff;
			}
			.discuss{
				margin-top:25rpx;
				background-color: #fff;
				.discuss-control{
					padding:30rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					.discuss-control-title{
						font-weight: bold;
						font-size: 35rpx;
					}
					.discuss-control-sort{
						background-color: #F4F6F5;
						border-radius: 35rpx;
						height: 70rpx;
						padding:7rpx;
						box-sizing: border-box;
						display: inline-flex;
						align-items: center;
						text{
							font-size: 30rpx;
							display: inline-flex;
							align-items: center;
							height: 100%;
							padding:0 35rpx;
							border-radius: 30rpx;
							&.on{
								background-color: #fff;
								
							}
						}
					}
				}
			}
		}
		.reply{
			flex-shrink: 0;
			width:100%;
		}
	}
</style>